<template>
  <div>
    <h2 class="title">疫情期间出行政策</h2>
    <van-field v-model="fieldValue1" is-link readonly label="出发城市" placeholder="请选择出发城市" @click="show1 = true" />
    <van-popup v-model="show1" round position="bottom">
      <van-cascader v-model="cascaderValue1" title="请选择出发城市" :options="options" @close="show1 = false" @finish="onFinish1" />
    </van-popup>
    <van-field v-model="fieldValue2" is-link readonly label="目的城市" placeholder="请选择目的城市" @click="show2 = true" />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader v-model="cascaderValue2" title="请选择目的城市" :options="options" @close="show2 = false" @finish="onFinish2" />
    </van-popup>
    <div class="search">
      <van-button type="primary" size="large" @click="search">查询</van-button>
    </div>
    <div class="content">
      <h5 class="sub_title">{{ this.fromInfo.city_name }}政策:</h5>
      <div class="desc" ref="outdesc"></div>
      <h5 class="sub_title">{{ this.toInfo.city_name }}政策:</h5>
      <div class="desc" ref="indesc"></div>
    </div>
  </div>
</template>
<script>
import api from '@/api/index.js'
export default {
  data () {
    return {
      show1: false,
      show2: false,
      departure: '',
      destination: '',
      fromInfo: {},
      toInfo: {},
      fieldValue1: '',
      fieldValue2: '',
      cascaderValue1: '',
      cascaderValue2: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: []
    }
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish1 ({ value, selectedOptions, tabIndex }) {
      this.departure = value
      this.show1 = false
      this.fieldValue1 = selectedOptions.map((option) => option.text).join('/')
    },
    onFinish2 ({ value, selectedOptions, tabIndex }) {
      this.destination = value
      this.show2 = false
      this.fieldValue2 = selectedOptions.map((option) => option.text).join('/')
    },
    search () {
      api
        .getTravelPolicy({
          from: this.departure,
          to: this.destination
        })
        .then((res) => {
          console.log('-查询城市疫情-', res.data)
          this.fromInfo = res.data.result.from_info
          this.toInfo = res.data.result.to_info
          this.fromInfo.low_in_desc = this.fromInfo.low_in_desc.replace(/\n/g, '<br>')
          this.$refs.outdesc.innerHTML = this.fromInfo.out_desc
          this.$refs.indesc.innerHTML = this.fromInfo.low_in_desc
        })
    }
  },
  created () {
    api.getTravelData().then((res) => {
      const result = res.data.result
      // 处理数据结构：[{text:'',value:'',children:[{}]},{}]
      const arr = []
      result.forEach((item) => {
        const obj = {}
        obj.text = item.province // 省份名称
        obj.value = item.province_id // 省份的标识id
        obj.children = [] // 二级区域
        item.citys.forEach((ele) => {
          const child = {}
          child.text = ele.city
          child.value = ele.city_id
          // 追加给obj.children=[]
          obj.children.push(child)
        })
        // -----------
        arr.push(obj)
      })
      // 打印处理后的数据
      this.options = arr
    })
  }
}
</script>
<style lang="less" scoped>
.title {
  padding: 0.2rem;
}
.search {
  margin: 0.2rem;
}
.sub_title {
  margin: 00.2rem;
}
.desc {
  margin: 00.2rem;
}
</style>
